import { Button, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMemo } from 'react'
import { useRecoilValue } from 'recoil'
import styles from './index.module.less'
import EventTitle from '@/components/EventTitle'
import IconSvg from '@/components/IconSvg'
import { IPressure } from '@/@types/common'
import { dictValues } from '@/store/dicts'

interface TableEvent {
  list: IPressure[]
  txt: string
  handlePreview: (info: IPressure) => void
}

export default (props: TableEvent) => {
  const dictValuesList = useRecoilValue(dictValues)
  const { list, txt, handlePreview } = props

  const columns: ColumnsType<IPressure> = useMemo(
    () => [
      // {
      //   title: '序号',
      //   align: 'center',
      //   render: (text, record, index) => index + 1,
      // },
      {
        title: '发生病区',
        dataIndex: 'happenAreaName',
        align: 'center',
      },
      {
        title: '住院患者病案号',
        dataIndex: 'patientNumber',
        align: 'center',
      },
      {
        title: '入院时间',
        dataIndex: 'admissionTime',
        align: 'center',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        align: 'center',
        render: (value) => dictValuesList.sex.find((item) => item.value === `${value}`)?.label,
      },
      {
        title: '年龄',
        dataIndex: 'age',
        align: 'center',
        render: (value) => dictValuesList.age.find((item) => item.value === `${value}`)?.label,
      },
      // {
      //   title: '状态',
      //   dataIndex: 'status',
      //   align: 'center',
      //   render: (value) => (
      //     <div className={styles.tag} style={computedColor(value)}>
      //       {dictValuesList.report_status.find((item) => item.value === value)?.label}
      //     </div>
      //   ),
      // },
      {
        title: '操作',
        align: 'center',
        render: (_, recod) => (
          <div className={styles.btns}>
            <Button type='link' onClick={() => handlePreview(recod)} icon={<IconSvg name='look' />}>
              查看
            </Button>
          </div>
        ),
      },
    ],
    [list],
  )

  return (
    <div>
      <EventTitle text={txt} />
      <Table style={{ marginTop: '24px' }} pagination={false} columns={columns} dataSource={list} rowKey={'id'} />
    </div>
  )
}
